<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>	
		<style type="text/css">
			body{
				background-color: black;
			}	
			img{
				position: absolute;
				left: 500px;
				top:200px;
			}
		</style>
	<script src="js/jquery-3.1.1.min.js"></script>	
	<script>
		//  199000749 许业娜
		$(function(){
			$(document).click(function(e){
				$(document).keydown(function(e){
					if(e.keyCode==32){
						$('#player').attr("src","img/playerbig_right.gif")
					}
				})
				$(document).dblclick(function(){
						$('#player').attr("src","img/playerbig_right.gif")
				})
				x1 = $('#player').position().left;
				y1 = $('#player').position().top;
				x2 = e.clientX;
				y2=e.clientY;
				// console.log(x2+" "+y2  );
				if(x1<x2){
					$('#player').attr("src","img/player_right.gif");
				}else{
					$('#player').attr("src","img/player_left.gif");
				}

				time1 = setInterval(xx,"50");
				time2 = setInterval(yy,"50");
				function xx(){
					if(x1<x2){
						if(Math.abs($('#player').position().left-x2)<=15){
							clearInterval(time1);
						}else{
							console.log(Math.abs(x1-x2));
							$("#player").stop().css({"left":"+=15px"})
						}
					}else{
						if(Math.abs($('#player').position().left-x2)<=15){
							clearInterval(time1);
						}else{
							console.log(Math.abs(x1-x2));
							$("#player").stop().css({"left":"-=15px"})
						}
					}
				}
				function yy(){
					if(y1<y2){
						if(Math.abs($('#player').position().top-y2)<=15){
							clearInterval(time2);
						}else{
							// console.log(Math.abs(y1-y2));
							$("#player").stop().css({"top":"+=15px"})
						}
					}else{
						if(Math.abs($('#player').position().top-y2)<=15){
							clearInterval(time2);
						}else{
							// console.log(Math.abs(y1-y2));
							$("#player").stop().css({"top":"-=15px"})
						}
					}
				}
			})
			
		})


	
	</script>
	</head>
	<body>
		<img id="player" src="img/player_left.gif" >
	</body>
</html>
